<template>
	<view class="content">
		<view class="top-bg">
			<view class="top-line">
				<view class="top-item">
					<view class="text" style="flex:1;">产品名称:</view>
					 <view style="flex:3;margin-right: 20px;">
					 	<uni-data-select v-model="product_code" :localdata="products" @change="selectChange" :clear="true"></uni-data-select>
					 </view>
				</view>
			</view>
			<view class="top-line">
				<view class="top-item">
					<view class="text" style="flex:1;">车间:</view>
					 <view style="flex:3;margin-right: 20px;">
					 	<uni-data-select v-model="workshop_value" :localdata="workshops"  @change="selectChange"  :clear="true"></uni-data-select>
					 </view>
				</view>
			</view>
			<view class="top-line">
				<view class="top-item">
					<view class="text" style="flex:1;">月底计划:</view>
					 <view style="flex:3;margin-right: 20px;">
						<uni-datetime-picker v-model="dateRange" type="daterange" @change="dateChange" :clear-icon="false" />
					 </view>
				</view>
			</view>
		</view>
		<view class="content-bg">
			<uni-table ref="table" :loading="loading"  stripe v-if="type==0" >
				<uni-tr>
					<uni-th align="center">计划编号</uni-th>
					<uni-th align="center">计划名称</uni-th>
					<uni-th align="center">产品编码</uni-th>
					<uni-th align="center">产品名称</uni-th>
					<uni-th align="center">车间</uni-th>
					<uni-th align="center">开始日期</uni-th>
					<uni-th align="center">结束日期</uni-th>
					<uni-th align="center">排程数量</uni-th>
					<uni-th align="center">完工合格</uni-th>
					<uni-th align="center">结果</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center" style="white-space: nowrap;">{{ item.f_no }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.schedule_name }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.product_code }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.product_name }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.f_workshop }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.starttime }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.endtime }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.f_plannum }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.f_goodnum }}</uni-td>
						<uni-td align="center" style="white-space: nowrap;">{{ item.result }}%</uni-td>
				</uni-tr>
			</uni-table>
			<uni-table ref="table" :loading="loading"  stripe v-if="type==1" >
				<uni-tr>
					<uni-th align="center">产品编码</uni-th>
					<uni-th align="center">产品名称</uni-th>
					<uni-th align="center">排程数量</uni-th>
					<uni-th align="center">完工合格</uni-th>
					<uni-th align="center">计划达成</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center" style="white-space: nowrap;">{{ item.product_code }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.product_name }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.plannum }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.goodnum }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.result }}%</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
			 
		</view>
		<view class="content-bg">
			<view class="line-container">
			    <view class="line"></view>
			    <view class="text">计划达成率曲线</view>
			    <view class="line"></view>
			  </view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="{dataLabel:false,xAxis:{rotateLabel:true},extra:{column:{type:'stack',width:10}}}" :chartData="chartsData"/>
			</view>
		</view>
	</view>
</template>

<script>
	import {ProductList,GetTodayProdPlanDetailList,GetMouthProdPlanDetailList} from '../../common/product_api.js'
	import * as util from '../../common/util.js'
	
	export default {
		data() {
			return {
				type:0,
				products: [],
				product_code: '',
				workshops:[{
					text:"铸造",
					value:"铸造"
				},{
					text:"机加",
					value:"机加"
				}],
				workshop_value:'',
				dateRange: [this.getDate(Date.now() - 366 * 24 * 3600000), this.getDate(Date.now())],
				loading: false,
				dataArray:[],
				tableData:{},
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				chartsData:{},
			};
		},
		onLoad(option){
			console.log("onLoad>>>");
			this.type = option.type;
			if (option.type == 0) {
				uni.setNavigationBarTitle({
					title: "日生产数量详情"
				})
			} 
			else {
				uni.setNavigationBarTitle({
					title: "月生产数量详情"
				})
			}
			this.loadProducts();
			this.loadData();
		},
		methods:{
			loadProducts(){
				ProductList().then(res=>{
					var array = [];
					res.forEach(item=>{
						array.push({text:item.f_name,value:item.f_code}); 
					});
					this.products = array;
				});
			},
			
			loadData(){
				var data = {
					"productCode": this.product_code,
					"productName":"",
					"workshop":this.workshop_value,
					"startTime":this.dateRange[0],
					"endTime":this.dateRange[1]
				}
				if (this.type == 0) {
					GetTodayProdPlanDetailList(data).then(res=>{
						console.log("GetTodayProdPlanDetailList", res);
						this.dataArray = res;
						this.getData(1);
						this.setChartData(res);
					});
				}
				else {
					GetMouthProdPlanDetailList(data).then(res=>{
						console.log("GetMouthProdPlanDetailList", res);
						this.dataArray = res;
						this.getData(1);
						this.setChartData(res);
					});
				}
			},
			getData(pageCurrent, value = ''){
				console.log("pageCurrent:" + pageCurrent);
				this.loading = true
				this.pageCurrent = pageCurrent
				
				util.getPageData({
					srcData: this.dataArray,
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.getData(e.current)
			},
			dateChange(e) {
				var dates = JSON.parse(JSON.stringify(this.dateRange));
				console.log('dateClick', dates);
				this.loadData();
			},
			selectChange(){
				this.loadData();
			},
			getDate(date){
			  date = new Date(date)
			  const year = date.getFullYear()
			  const month = date.getMonth()+1
			  const day = date.getDate()
			  return `${year}-${this.addZero(month)}-${this.addZero(day)}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},
			setChartData(data){
				var categories = [];
				
				var plannums = [];
				var goodnums = [];
				data.forEach(item => {
					categories.push(item.product_name);
					plannums.push(item.plannum);
					if (item.goodnum){
						goodnums.push(item.goodnum);
					} else {
						goodnums.push(0);
					}
				});
				var series = [
					{
						"name": "排程数量",
						"data": plannums
					},
					{
						"name": "完工合格",
						"data": goodnums
					}
				];
				var ata = {
					"categories": categories,
					"series": series
				};
				console.log(ata);
				this.chartsData = ata;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./product-detail.css");
</style>
